<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">

</head>
<body>

<div class="container">

    <h4>分页导航条(pagination)</h4>
    <ul class="pagination pagination-lg">
        <li><a href="javaScript:">首页</a></li>
        <li><a href="javaScript:">上一页</a></li>
        <li><a href="javaScript:">...</a></li>
        <li><a href="javaScript:">3</a></li>
        <li><a href="javaScript:">4</a></li>
        <li><a href="javaScript:">5</a></li>
        <li><a href="javaScript:">...</a></li>
        <li><a href="javaScript:">下一页</a></li>
        <li><a href="javaScript:">尾页</a></li>
    </ul>

    <h4>分页导航条(pager)</h4>
    <ul class="pager">
        <li><a href="javaScript:">上一页</a></li>
        <li><a href="javaScript:">下一页</a></li>
    </ul>

    <h4>标签和徽章</h4>
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a href="javaScript:" class="navbar-brand">品牌</a>
        </div>
        <ul class="nav navbar-nav">
            <li>
                <a href="javaScript:">
                    首页
                    <span class="label label-success">New</span>
                </a>
            </li>
            <li>
                <a href="javaScript:">
                    音乐
                    <span class="label label-default">New</span>
                </a>
            </li>
            <li>
                <a href="javaScript:">
                    视频
                    <span class="label label-info">New</span>
                </a>
            </li>
            <li><a href="javaScript:">
                图片
                <span class="label label-warning">New</span>
            </a></li>
            <li>
                <a href="javaScript:">
                    地图
                    <span class="label label-danger">New</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-myCollpase">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>
            <a href="javaScript:" class="navbar-brand">品牌</a>
        </div>
        <div class="collapse navbar-collapse navbar-responsive-myCollpase">
            <ul class="nav navbar-nav">
                <li><a href="javaScript:">首页<span class="badge">5</span></a></li>
                <li><a href="javaScript:">视频<span class="badge pull-right">5</span></a></li>
                <li><a href="javaScript:">图片<span class="badge pull-right">5</span></a></li>
                <li><a href="javaScript:">地图<span class="badge pull-right">5</span></a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>